<template>
    <div class="w-full h-full ">
        <div class="w-5/6 m-auto h-full grid grid-cols-3 gap-10">
            <div class="w-full" v-for="item in videoList" :key="item.id">
                <el-card @click="() => { goToWatch(item) }" class="w-full cursor-pointer p-0">
                    <video :src="item.url" class="w-full h-40 p-0 m-0"></video>
                    <div class="p-2">
                        <span>{{ item.title }}</span>
                    </div>
                </el-card>
            </div>
        </div>
    </div>
</template>
 
<script setup>
import { ref } from 'vue'
import axios from 'axios'
import { useRouter } from 'vue-router'
const router = useRouter()
const videoList = ref([])
const getVideoList = async () => {
    const res = await axios.post('http://localhost:8000/videos/get_one', {}).then(res => {
        let resp = res.data
        if (resp.code === 200) {
            videoList.value = resp.data
            videoList.value = videoList.value.map(item => {
                item.cover = drawImage(item.url, 'video/mp4')
                return item
            })
        }
    })
}
function goToWatch(item) {
    router.push({ name: 'watch', query: { videoInfo: JSON.stringify(item) } })
}
getVideoList()

let covers = ref([])



</script> 
 
<style scoped></style>